<template>
  <div class="messageList flex-column" ref="messageList">
    <div class="chatTitle listTitle flex-row">
      <div class="layui-form">
        <div class="layui-form-item">
          <select name="city" lay-filter="changeMessageListType">
            <option value="all" :selected="messageListType=='all'">全部消息列表</option>
            <option value="user" :selected="messageListType=='user'">好友消息列表</option>
            <option value="group" :selected="messageListType=='group'">群消息列表</option>
          </select>
        </div>
      </div>
      <img src="../../assets/images/refuse.png" class="refuseChat" width="15px" height="15px" alt="">
    </div>
    <div class="chatOperate flex-row">
      <input type="text" class="chatSearch" placeholder="查找用户/群" v-model="messageListFilter">
      <button class="clearChat layui-btn layui-btn-xs" @click="clearList">清空列表</button>
    </div>
    <ul class="scrollAuto autoGrow">
      <user-list-item
        v-for="(item, index) in chatListMap[uistate.accountid]"
        :chatid="item"
        :showBadge="true"
        :showLastMessage="true"
        :currentUserWxid="currentUser.wxid"
        @click="changeCurrentUser(item)"
        :key="index">
        <template v-slot:attachInfo><i class="layui-icon layui-icon-close deleteMessage" @click.stop = "removeMessage(item)"></i></template>  
      </user-list-item>
    </ul>
    <div class="dragLine"></div>
    <i :class="['toggleList', 'layui-icon', 'layui-icon-triangle-r',showServiceList && 'showList']"
      @click="toggleServiceList">
    </i>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import UserListItem from '@/components/userListItem';
export default {
  name: 'messageList',
  components: {
    UserListItem
  },
  data() {
    return {
      messageListType: 'all',
      messageListFilter: '',
      dragData: {
        x: 0,
        start: false,
        width: 180,
      },
      sortedMessages: []
    }
  },
  mounted() {
    this.$form.render();
    this.$form.on('select(changeMessageListType)', this.changeMessageListType)
    const serviceContainer = document.querySelector('.serviceContainer');
    serviceContainer.onmousedown=this.dragStart;
    serviceContainer.onmousemove=this.drag;
    serviceContainer.onmouseup=this.dragEnd;
    this.$nextTick(()=>{
      if (this.sortedMessages.length) {
        this.setCurrentUser(this.sortedMessages[0])
      }
    })
  },
  props: ['showServiceList'],
  computed: {
    ...mapState(['messages', 'currentMessages', 'currentUser','chatMap','chatListMap','uistate'])
  },
  watch: {
    currentMessages(currentMessages, oldMessages) {
      if (!currentMessages) return
      let messages = JSON.parse(JSON.stringify(this.currentMessages));
      messages.sort((a,b)=>{
        if (a.always_top && b.always_top) {
          return 0
        } else if (a.always_top && !b.always_top){
          return -1
        } else {
          return 0
        }
      })
      messages = messages.filter(item=>{
        if (this.messageListType == 'all') {
          if (this.messageListFilter) {
            return item.name.indexOf(this.messageListFilter) > -1;
          }
          return true
        }
        if (item.type == 'user' &&  this.messageListType == 'user') {
          if (this.messageListFilter) {
            return item.name.indexOf(this.messageListFilter) > -1;
          }
          return true
        }
        if (item.type == 'group' &&  this.messageListType == 'group') {
          if (this.messageListFilter) {
            return item.name.indexOf(this.messageListFilter) > -1;
          }
          return true
        }
        return false
      })
      this.sortedMessages = messages;
      const curWxid = this.currentUser ? this.currentUser.wxid : ''
      const userInMessageList = messages.filter(m=>m.wxid==this.currentUser.wxid).length
      if (!this.currentUser || !userInMessageList) {
        this.setCurrentUser(messages[0] || {})
      }
    },

  },
  methods: {
    ...mapActions(['removeChatList']),
    ...mapMutations(['setCurrentUser']),
    clearList() {

    },
    removeMessage(message){
      const {  csid, friendwxid ,  wxaccount } = message
      this.removeChatList({ csId : csid, friendWxid : friendwxid, accountWxId:wxaccount })
    },
    toggleServiceList() {
      this.$emit('toggleServiceList')
    },
    changeCurrentUser(user) {
      this.setCurrentUser(user)
    },
    changeMessageListType({value}){
      this.messageListType = value;
    },
    dragStart: function(e) {
      if (!e.target.classList.contains('dragLine')) return
      this.dragData.start = true;
      this.dragData.x = e.clientX;
      this.dragData.width = this.$refs.messageList.clientWidth;
    },
    drag: function(e) {
      if (!this.dragData.start) return
      var distance = e.clientX - this.dragData.x;
      var min = 180;
      var max = 320;
      var width = this.dragData.width + distance;
      width = width > max ? max : width < min ? min : width;
      this.$refs.messageList.style.width = `${width}px`;
    },
    dragEnd: function(e) {
      this.dragData.start = false;
      this.dragData.x = 0;
    },
  }
}
</script>
